<template>
  <div class="page">
    <van-button type="default" class="cancel">取消</van-button>
    <div class="caption">乐听</div>
    <div class="text">为您带来轻松的体验</div>
    <img
      class="img"
      src="../assets/img/注册登录页/Login_01.png"
      alt="图片加载失败"
    />
    <!-- <van-image class="img" src="require('../assets/img/注册登录页/Login_01.png')"/> -->
    <van-button class="register " round type="primary">登录</van-button>
    <van-button class="register " round type="primary">注册</van-button>
    <van-checkbox
      class="choice"
      shape="square"
      v-model="checked"
      icon-size="14px"
      checked-color="#333"
      >同意《用户许可协议》</van-checkbox
    >
    <van-divider
      :style="{
        color: '#333333',
        borderColor: '#5F4AC1',
        padding: '20px 16px'
      }"
    >
      更多登录方式
    </van-divider>
    <van-row gutter="70" type="flex" justify="center">
      <van-col span="6">
        <img
          class="enter"
          src="../assets/img/注册登录页/Login_01.png"
          alt="图片加载失败"
        />
      </van-col>
      <van-col span="6">
        <img
          class="enter"
          src="../assets/img/注册登录页/Login_01.png"
          alt="图片加载失败"
        />
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checked: true
    }
  }
}
</script>
<style scoped>
.page {
  font-family: 隶书;
}
.cancel {
  width: 62px;
  height: 69px;
  color: #333;
  font-size: 14px;
  border: none;
}
.caption {
  text-align: center;
  font-size: 28px;
  color: #ccc;
}
.text {
  font-size: 14px;
  text-align: center;
  color: #ccc;
}
.img {
  display: block;
  width: 222px;
  height: 169px;
  overflow: hidden;
  margin: 20px auto 60px auto;
}
.register {
  display: block;
  overflow: hidden;
  margin: 15px auto 10px auto;
  width: 231px;
  height: 40px;
}
.choice {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-family: Arial !important;
  color: #ccc;
}
.enter {
  width: 60px;
  height: 60px;
}
</style>
